<template>
    <div class="game_box">
        <div class="game_header">
            <van-row>
                <van-col :span="8">
                    难度： {{ levelTitle }}
                </van-col>
                <van-col :span="8">
                </van-col>
                <van-col :span="8">
                    时间： {{ curTime }}
                </van-col>
            </van-row>
        </div>

        <div class="table_box">
            <TableView ref="tableRef"
            class="tableStyle"/>
        </div>

        <div class="game_footer">
            <div class="number_box">
                <div class="oneNum"
                     v-for="it in range(1, 6)"
                     @click="inputNum">
                    {{ it }}
                </div>
                <van-button type="default" class="vanBtn" @click="returnPreActionOrEndGame">
                    {{ getGameOver() ? '结束' : '撤销' }}
                </van-button>
            </div>
            <div class="number_box">
                <div class="oneNum"
                     v-for="it in range(6, 10)"
                     @click="inputNum(it.blockInd, it.x * 3 + it.y, it.num)">
                    {{ it }}
                </div>
                <div class="oneNum"
                @clearInputNum="clearInputNum">
                    X
                </div>
                <van-button 
                type="default" 
                class="vanBtn"
                @click="resetFun">
                    重置
                </van-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import {computed, inject, onMounted, onUnmounted, ref} from "vue";
import TableView from "../components/tableView.vue";
import {useRoute} from "vue-router";


const range = inject('range');
const STARTTIMEKEY = "startTimeKey";
let startTime = null;
const route = useRoute();
let gameFlag = '';

onMounted(() => {
    startTime = localStorage.getItem(STARTTIMEKEY);
    if (!startTime) {
        startTime = +new Date();
    }
    gameFlag = route.query.gameFlag;
    if (gameFlag) {// 重新开始对局
        // todo
    }else {// 继续
        // todo
    }
})
const inputNum = inject('inputNum');
// const inputNum = (val)=> {
//     // 调用子类的方法来输入值
//     if(tableRef.value) {
//         tableRef.inputNum(val);
//     }
// }
const getGameOver = inject('getGameOver');
const clearInputNum = inject('clearInputNum');
// 退回上一步 或者 结束游戏
const returnPreActionOrEndGame = inject('returnPreActionOrEndGame');
const curTime = computed(() => new Date(startTime ? (+new Date()) - startTime : 0).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
}));
const levelTitle = ref('入门');
// 重置
const resetFun = inject('resetFun');
onUnmounted(() => {
    localStorage.setItem(STARTTIMEKEY, +new Date());
})
</script>

<style scoped>
.tableStyle {
    /*width: 1200px;
    height: 1200px;*/
}

.game_footer {
    width: 100%;

}
.number_box {
    display: flex;
    margin: 3px;
}
.oneNum {
    width: 50px;
    height: 50px;
    border: 1px solid black;
    text-align: center;
    line-height: 50px;
    margin: 10px;
}
.vanBtn {
    margin-top: 9px;
}
</style>